<template>
	<view class="list-tools">
		<view class="lt-btns">
			<view v-if="showSeBtn" class="lt-btn" @click="setDateMd({state: true})">
				<view class="b-txt">{{seDateStr}}</view>
				<u-icon name="arrow-down-fill" size="20"></u-icon>
			</view>
			<!-- 插槽 -->
			<slot></slot>
		</view>

		<view class="lt-cons" v-if="totalCount >= 0">
			<view class="lt-con">共<view class="c-tip">{{totalCount}}</view>条</view>
			<!-- 插槽 -->
			<view class="right-btn">
				<slot name="right-slot"></slot>
			</view>
		</view>

		<MyDateMd v-if="dateMdState" :sedate="sedate" @handEvent="setDateMd"></MyDateMd>
	</view>
</template>

<script>
	import U from '@/common/UT';
	import MyDateMd from '../my-date-md/my-date-md.vue';

	export default {
		name: "list-tools",
		components: {
			MyDateMd
		},
		props: {
			// 显示起止日期按钮
			showSeBtn: {
				type: Boolean,
				default: true
			},
			// 数据总数
			total: {
				type: Number,
				default: 0
			},
			// 起止日期
			sedate: {
				type: Object,
				default: function() {
					return {
						st: null,
						et: null
					}
				}
			}
		},
		data() {
			return {
				// 数据总数
				totalCount: this.total,
				// 起止日期显示
				seDateStr: '',
				// 日期弹框的显隐状态
				dateMdState: false
			};
		},
		watch: {
			// 监听父级传入的事件
			total: {
				handler(o) {
					// console.log('正在监听total参数', o);

					this.totalCount = o;
				}
			},
			sedate: {
				handler(o) {
					// console.log('起止日期监听', o);

					// 处理起止日期显示
					if (!o.st && !o.et) {
						this.seDateStr = '请选择时间'
					} else {
						if (o) {
							this.seDateStr = U.sedate(o.st, o.et, 2);
						}
					}

				},
				// true=深度监听
				deep: true
			}
		},
		created() {
			// console.log('父级传入的数据条数', this.total);
			// console.log('父级传入的默认起止日期', this.sedate);
			// 设置默认值
			// if (!this.sedate.st || !this.sedate.et) {
			// 	this.sedate.st = U.date2str(new Date());
			// 	this.sedate.et = U.date2str(new Date());
			// }
			// // 处理起止日期显示
			// this.seDateStr = U.sedate(this.sedate.st, this.sedate.et, 2);
			if (!this.sedate.st && !this.sedate.et) {
				this.seDateStr = '请选择时间'
			} else {
				// 处理起止日期显示
				this.seDateStr = U.sedate(this.sedate.st, this.sedate.et, 2);
			}

		},
		methods: {
			// 选择起止日期
			setDateMd(e) {
				console.log('选择日期事件', e);
				if (this.sedate.st && this.sedate.et) {
					// 设置值
					this.sedate.st = U.date2str(new Date());
					this.sedate.et = U.date2str(new Date());
					this.seDateStr = U.sedate(this.sedate.st, this.sedate.et, 2);
				}
				if (e.state) { // 开启
					this.dateMdState = e.state;
				} else { // 关闭
					if (e.data) {
						// 设置值
						this.sedate.st = e.data.sd;
						this.sedate.et = e.data.ed;
						// 设置显示
						this.seDateStr = U.sedate(this.sedate.st, this.sedate.et, 2);


						// 传递值给父级
						this.$emit('selDate', this.sedate);
					}

					this.dateMdState = e.state;
				}
			},
		},
	}
</script>

<style lang="less">
	.list-tools {
		// 暂时不要这两个，因为使用了z-paging，如果以后要用可以外面套一个view单独设置
		// position: fixed; 
		// top: var(--window-top);

		height: 60rpx;
		width: 100%;
		z-index: 99;
		padding: 6rpx 0rpx 6rpx 20rpx;
		font-size: 24rpx;
		background: #fefefe;
		border-bottom: 2rpx solid #efefef;
		display: flex;

		// 按钮组
		.lt-btns {
			display: inline-block;
			flex: 1;

			.lt-btn {
				line-height: 20px;
				overflow: auto;
				position: relative;
				display: inline-block;
				padding: 4rpx 6rpx;
				background: #fff;
				border: 2rpx solid #00c3ce;
				border-radius: 8rpx;
				margin-right: 20rpx;
				color: #00c3ce;

				.b-txt {
					display: inline-block;
					height: 100%;
					padding-right: 4rpx;
					color: #00c3ce;
				}

				.b-icon {
					position: absolute;
					top: 8rpx;
					right: 4rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.sel-btn {
				color: #fff !important;
				background: #00c3ce !important;
			}
		}

		// 右边内容
		.lt-cons {
			display: flex;
			line-height: 48rpx;
			color: #00c3ce;
			text-align: right;
			margin-right: 10rpx;

			.lt-con {
				width: 100rpx;
				margin-right: 10rpx;

				.c-tip {
					font-weight: bold;
					display: inline-block;
				}
			}

			.right-btn {
				flex: 1;
			}
		}
	}
</style>